<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
    <script src="http://img.meizhanggui.cc/lib/art-template.js"></script>
    <style>
        th, td {
            min-width: 200px;
            text-align: center;
        }

        em {
            color: red;
            font-style: normal;
        }
    </style>
</head>
<body>
<div id="main">

</div>
<script type="text/html">
    <h1>进程管理</h1>
    <table>
        <tr>
            <th>id</th>
            <th>目标</th>
            <th>可用</th>
        </tr>
        {{each Manager.list as v,i}}
        <tr>
            <td>{{v.id}}</td>
            <td>{{v.target}}</td>
            <td>{{v.avaliable?'ture':'false'}}</td>
        </tr>
        {{/each}}
    </table>
    <br>
    <hr>
    <br>
    <h1>缓存管理</h1>
    <table>
        <tr>
            <th>序号</th>
            <th>目标</th>
        </tr>
        {{each Register.list as v,i}}
        <tr>
            <td>{{i}}</td>
            <td>{{v.id}}</td>
        </tr>
        {{/each}}
    </table>
</script>

<script>
    var tmp = template.compile($('[type="text/html"]').html());
    var refresh = function () {
        $.ajax({
            url: '/test/watch',
            success: function (obj) {
//                console.dir(obj);
                $('#main').html(tmp(obj));
            }
        })
    };
    refresh();
    setInterval(refresh, 1000);
</script>

</body>
</html>